<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<header class="header" id="site-header" th:fragment="header">
    <!--抽取出来的头部-->
    <audio id="notification_tone" src="mp3/message_tone.mp3"></audio>
    <div class="page-title">
        <h6>MoliHub</h6>
    </div>
    <div class="header-content-wrapper">
        <form class="search-bar w-search notification-list friend-requests">
            <div class="form-group with-button">
                <span class="text-center">此功能正在开发。。</span>
<!--                <input class="form-control js-user-search" placeholder="Search here people or pages..." type="text">-->
<!--                <button>-->
<!--                    <svg class="olymp-magnifying-glass-icon">-->
<!--                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>-->
<!--                    </svg>-->
<!--                </button>-->
            </div>
        </form>

        <a data-toggle="modal" data-target="#staticBackdrop" class="link-find-friend" style="cursor: pointer">找朋友</a>

        <div class="control-block" th:if="${session.loginUser != null}">

            <div class="control-icon more has-items">
                <svg class="olymp-happy-face-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                </svg>
                <div class="label-avatar bg-blue" id="request_number">0</div>

                <div class="more-dropdown more-with-triangle triangle-top-center">
                    <div class="ui-block-title ui-block-title-small">
                        <h6 class="title">好友请求</h6>
                        <a href="#">查找好友</a>
                        <a href="#">设置</a>
                    </div>

                    <div class="mCustomScrollbar" data-mcs-theme="dark">
                        <ul class="notification-list friend-requests" id="friend-requests">
                            <li v-for="friendRequest in friendRequests">
                                <div class="author-thumb">
                                    <img :src="friendRequest.aUserInfo.imagePath" alt="author"
                                         style="width: 34px;height: 34px">
                                </div>
                                <div class="notification-event">
                                    <a href="#" class="h6 notification-friend">{{friendRequest.aUserInfo.userName}}</a>
                                    <!--添加好友时附带的消息-->
                                    <span class="chat-message-item">请求加你为好友</span>
                                </div>
                                <span class="notification-icon">

									<a href="javascript:void(0);" onclick="acceptFriendRequest(this)"
                                       class="accept-request">
										<span class="icon-add without-text">
											<svg class="olymp-happy-face-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon">
                                                </use>
                                            </svg>
										</span>
									</a>
									<a href="javascript:void(0);" onclick="refuseToAccept(this)"
                                       class="accept-request request-del">
										<span class="icon-minus">
											<svg class="olymp-happy-face-icon">
                                               <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon">
                                               </use>
                                            </svg>
										</span>
									</a>

								</span>

                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="#olymp-three-dots-icon"></use>
                                    </svg>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <a href="#" class="view-all bg-blue">查看所有通知</a>
                </div>
            </div>

            <div class="control-icon more has-items">
                <svg class="olymp-chat---messages-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
                </svg>
                <div class="label-avatar bg-purple" id="chat-number">0</div>

                <div class="more-dropdown more-with-triangle triangle-top-center">
                    <div class="ui-block-title ui-block-title-small">
                        <h6 class="title">聊天 / 信息</h6>
                        <a onclick="readAllChatMessage();return false;" href="#">全部标记为已读</a>
                        <a href="#" onclick="return false;">设置</a>
                    </div>

                    <div class="mCustomScrollbar" data-mcs-theme="dark">
                        <ul class="notification-list chat-message" id="chat-message">
                            <li class="message-unread" v-for="chatMessage in chatMessages">
                                <div class="author-thumb">
                                    <img :src="chatMessage.aUserInfo.imagePath" alt="author"
                                         style="width: 34px;height: 34px">
                                </div>
                                <div class="notification-event">
                                    <a href="#" class="h6 notification-friend">{{chatMessage.aUserInfo.userName}}</a>
                                    <span class="chat-message-item"
                                          v-html="chatMessage.content">{{chatMessage.content}}</span>
                                    <span class="notification-date">
                                         <time class="entry-date updated"
                                               datetime="2004-07-24T18:18">{{chatMessage.time}}</time></span>
                                </div>
                                <span class="notification-icon js-chat-open open-chat-window">
                                     <svg class="olymp-chat---messages-icon">
                                         <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon">
                                         </use>
                                     </svg>
                                 </span>
                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon">
                                        </use>
                                    </svg>
                                </div>
                            </li>
                            <!--<li>
                                <div class="author-thumb">
                                    <img src="img/avatar60-sm.jpg" alt="author">
                                </div>
                                <div class="notification-event">
                                    <a href="#" class="h6 notification-friend">Jake Parker</a>
                                    <span class="chat-message-item">Great, I’ll see you tomorrow!.</span>
                                    <span class="notification-date"><time class="entry-date updated"
                                                                          datetime="2004-07-24T18:18">4 hours ago</time></span>
                                </div>
                                <span class="notification-icon">
                                        <svg class="olymp-chat-&#45;&#45;messages-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon">
                                            </use>
                                        </svg>
                                    </span>

                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon">
                                        </use>
                                    </svg>
                                </div>
                            </li>
                            <li>
                                <div class="author-thumb">
                                    <img src="img/avatar61-sm.jpg" alt="author">
                                </div>
                                <div class="notification-event">
                                    <a href="#" class="h6 notification-friend">Elaine Dreyfuss</a>
                                    <span class="chat-message-item">We’ll have to check that at the office and see
                                            if the client is on board with...</span>
                                    <span class="notification-date"><time class="entry-date updated"
                                                                          datetime="2004-07-24T18:18">Yesterday at 9:56pm</time></span>
                                </div>
                                <span class="notification-icon">
                                        <svg class="olymp-chat-&#45;&#45;messages-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon">
                                            </use>
                                        </svg>
                                    </span>
                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon">
                                        </use>
                                    </svg>
                                </div>
                            </li>
                            <li class="chat-group"
                            >
                                <div class="author-thumb">
                                    <img src="img/avatar11-sm.jpg" alt="author">
                                    <img src="img/avatar12-sm.jpg" alt="author">
                                    <img src="img/avatar13-sm.jpg" alt="author">
                                    <img src="img/avatar10-sm.jpg" alt="author">
                                </div>
                                <div class="notification-event">
                                    <a href="#" class="h6 notification-friend">You, Faye, Ed &amp; Jet +3</a>
                                    <span class="last-message-author">Ed:</span>
                                    <span class="chat-message-item">Yeah! Seems fine by me!</span>
                                    <span class="notification-date"><time class="entry-date updated"
                                                                          datetime="2004-07-24T18:18">March 16th at 10:23am</time></span>
                                </div>
                                <span class="notification-icon">
                                        <svg class="olymp-chat-&#45;&#45;messages-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon">
                                            </use>
                                        </svg>
                                    </span>
                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon">
                                        </use>
                                    </svg>
                                </div>
                            </li>-->
                        </ul>
                    </div>

                    <a href="#" class="view-all bg-purple">查看全部留言</a>
                </div>
            </div>

            <div class="control-icon more has-items">
                <svg class="olymp-thunder-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-thunder-icon"></use>
                </svg>

                <div class="label-avatar bg-primary" id="notification-number">0</div>

                <div class="more-dropdown more-with-triangle triangle-top-center">
                    <div class="ui-block-title ui-block-title-small">
                        <h6 class="title">通知</h6>
                        <a href="#" onclick="readAllNotification();return false;">全部设为已读</a>
                        <a href="#" onclick="return false;">设置</a>
                    </div>

                    <div class="mCustomScrollbar" data-mcs-theme="dark">
                        <ul class="notification-list" id="notification-list">
                            <li v-for="notificationMessage in notificationMessages" class="">
                                <div class="author-thumb">
                                    <img :src="notificationMessage.aUserInfo.imagePath" alt="author"
                                         style="width: 34px;height: 34px">
                                </div>
                                <div class="notification-event">
                                    <div>
                                        <a href="#" class="h6 notification-friend">{{notificationMessage.A}}</a>
                                        <p class='d-none' id='flag'>{{notificationMessage.flag}}</p>
                                        <span v-html="notificationMessage.content">{{notificationMessage.content}}</span>
                                    </div>
                                    <span class="notification-date"><time class="entry-date updated"
                                                                          datetime="2004-07-24T18:18">{{notificationMessage.time}}</time></span>
                                </div>
                                <span class="notification-icon">
                                         <svg class="olymp-comments-post-icon">
                                             <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                             </use>
                                         </svg>
                                     </span>

                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon">
                                        </use>
                                    </svg>
                                    <svg class="olymp-little-delete" id='delete-notification'>
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-little-delete">
                                        </use>
                                    </svg>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <a href="#" class="view-all bg-primary">查看所有通知</a>
                </div>
            </div>

            <div class="author-page author vcard inline-items more">
                <div class="author-thumb">
                    <img alt="author" id="user-img" style="width: 40px; height: 40px" class="avatar"
                         th:src="${(session.loginUser == null) ? 'img/author-page.jpg': session.loginUser.imagePath} ">
                    <div th:if="${session.loginUser.status == 0}">
                        <span class="icon-status disconected" id="user-status"></span>
                    </div>
                    <div th:if="${session.loginUser.status == 1}">
                        <span class="icon-status online" id="user-status"></span>
                    </div>
                    <div th:if="${session.loginUser.status == 2}">
                        <span class="icon-status away" id="user-status"></span>
                    </div>
                    <div th:if="${session.loginUser.status == 3}">
                        <span class="icon-status status-invisible" id="user-status"></span>
                    </div>
                    <div class="more-dropdown more-with-triangle">
                        <div class="mCustomScrollbar" data-mcs-theme="dark">
                            <div class="ui-block-title ui-block-title-small">
                                <h6 class="title">Your Account</h6>
                            </div>

                            <ul class="account-settings">
                                <li>
                                    <a th:href="@{/user-info}">

                                        <svg class="olymp-menu-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-menu-icon">
                                            </use>
                                        </svg>

                                        <span>账户设置</span>
                                    </a>
                                </li>
                                <li>
                                    <a th:href="@{/user-admin}">
                                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip"
                                             data-placement="right" data-original-title="FAV PAGE">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon">
                                            </use>
                                        </svg>

                                        <span>后台管理</span>
                                    </a>
                                </li>
                                <li>
                                    <a th:href="@{/logout}">
                                        <svg class="olymp-logout-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-logout-icon">
                                            </use>
                                        </svg>
                                        <span>注销</span>
                                    </a>
                                </li>
                            </ul>

                            <div class="ui-block-title ui-block-title-small">
                                <h6 class="title">聊天设置</h6>
                            </div>

                            <ul class="chat-settings">
                                <li>
                                    <a href="#" onclick="changeStatus(this);return false;">
                                        <span class="icon-status online"></span>
                                        <span>在线</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" onclick="changeStatus(this);return false;">
                                        <span class="icon-status away"></span>
                                        <span>离开</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" onclick="changeStatus(this);return false;">
                                        <span class="icon-status disconected"></span>
                                        <span>离线</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" onclick="changeStatus(this);return false;">
                                        <span class="icon-status status-invisible"></span>
                                        <span>隐身</span>
                                    </a>
                                </li>
                            </ul>

                            <div class="ui-block-title ui-block-title-small">
                                <h6 class="title">自定义状态</h6>
                            </div>

                            <form class="form-group with-button custom-status">
                                <input class="form-control" placeholder="" type="text" value="Space Cowboy">
                                <button class="bg-purple">
                                    <svg class="olymp-check-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-check-icon">
                                        </use>
                                    </svg>
                                </button>
                            </form>

                            <div class="ui-block-title ui-block-title-small">
                                <h6 class="title">About Olympus</h6>
                            </div>

                            <ul>
                                <li>
                                    <a href="#">
                                        <span>Terms and Conditions</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>FAQs</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>Careers</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>Contact</span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
                <a th:href="@{/ProfilePage}" class="author-name fn">
                    <div class="author-title">
                        <span th:text="${session.loginUser.userName}" id="loginedUserName"></span>
                        <svg class="olymp-dropdown-arrow-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon"></use>
                        </svg>
                    </div>
                    <span class="author-subtitle">SPACE COWBOY</span>
                </a>
            </div>
        </div>
        <div class="control-block" th:if="${session.loginUser == null}">
            <a th:href="login.html" class="author-name fn" th:if="${session.loginUser == null}">
                <a th:href="login.html" class="btn btn-secondary btn-sm mt-2">登录
                    <div class="ripple-container"></div>
                </a>
            </a>
        </div>
    </div>
</header>

</body>
</html>